<template>
  <div>
    <!-- 
        el-dialog
        visible	是否显示 Dialog，支持 .sync 修饰符	boolean
        show-close	是否显示关闭按钮	boolean
        before-close	关闭前的回调，会暂停 Dialog 的关闭
        title	Dialog 的标题，也可通过具名 slot （见下表）传入
        center	是否对头部和底部采用居中布局	boolean
     -->
    <el-dialog
      :title="isAdd ? '添加菜单' : '编辑菜单'"
      :visible.sync="isShow"
      :before-close="cancel"
      center
    >
      <el-form :model="menuForm" ref="menuRef" :rules="rules">
        <el-form-item label="菜单名称" prop="title" :label-width="formLabelWidth">
          <el-input v-model="menuForm.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="上级菜单" prop="pid">
          <el-select
            v-model="menuForm.pid"
            @change="changePid"
            placeholder="请选择上级菜单"
          >
            <el-option label="顶级菜单" :value="0"></el-option>
            <el-option
              v-for="item in $store.getters['menu/getMenu']"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          菜单类型
          <el-radio v-model="menuForm.type" :label="1" style="margin-left: 10px"
            >目录</el-radio
          >
          <el-radio v-model="menuForm.type" :label="2">菜单</el-radio>
        </el-form-item>

        <el-form-item
          v-if="menuForm.type == 1"
          label="菜单图标"
          :label-width="formLabelWidth"
        >
          <el-select v-model="menuForm.icon" placeholder="请选择">
            <el-option
              v-for="item in iconlist"
              :key="item"
              :label="item"
              :value="item"
            >
              <i :class="item"></i>
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item v-else label="菜单地址" :label-width="formLabelWidth">
            <el-select v-model="menuForm.url" placeholder="请选择">
            <el-option
              v-for="item in IndexRouter"
              :key="item.path"
              :label="item.meta.title"
              :value="item.path"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item style="margin-left: 20px">
          状态
          <el-switch
            style="margin-left: 15px"
            v-model="menuForm.status"
            active-color="#13ce66"
            inactive-color="#ccc"
            :active-value="1"
            :inactive-value="2"
          >
            <!-- 
            inactive-color 关闭时候的背景颜色
            active-value switch 打开时的值
            inactive-value	switch 关闭时的值
           -->
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { menuAdd, menuInfo, menuEdit } from "../../request/api.js";
import {IndexRouter} from '../../router'
export default {
  props: ["isShow", "isAdd"],
  data() {
    return {
      dialogFormVisible: false,
      menuForm: {
        // 标单对象
        pid: 0, //上级分类编号 注意：顶级菜单number=0
        title: "", //菜单名称string
        icon: "", //图标string
        type: 1, // 类型 1目录2number
        url: "", // 菜单地址string
        status: 1, // 状态 1正常 2禁用
      },
      formLabelWidth: "80px",
      rules: {
        title: [
          { required: true, message: "请输入菜单名称", trigger: "blur" },
          { min: 2, max: 8, message: "长度在 2 到 8 个字符", trigger: "blur" },
        ],
        pid: [{ required: true, message: "请选择上级菜单", trigger: "change" }],
      },
       iconlist: [
        "el-icon-s-tools",
        "el-icon-setting",
        "el-icon-s-goods",
        "el-icon-goods",
      ],
      IndexRouter:IndexRouter
    };
  },
  methods: {
    // 封装一个修改pid事件 其实就是修改菜单类型的type值
    changePid() {
      this.menuForm.type = this.menuForm.pid == 0 ? 1 : 2;
    },
    // 封装一个事件取消
    cancel() {
      // 子传父
      this.$emit("cancel", false);
      this.reset();
    },
    // 封装一个晴空事件
    reset() {
      this.menuForm = {
        // 标单对象
        pid: 0, //上级分类编号 注意：顶级菜单number=0
        title: "", //菜单名称string
        icon: "", //图标string
        type: 1, // 类型 1目录2number
        url: "", // 菜单地址string
        status: 1, // 状态 1正常 2禁用
      };
      // resetFields 对整个表单进行重置 将所有字段重置为初始值并且移除所有校验结果
      this.$refs.menuRef.resetFields();
    },
    // 封装一个获取一条数据事件，数据回显
    lookup(id) {
      // console.log(id, "回显数据");
      menuInfo({ id }).then((res) => {
        // console.log(res, "获取一条数据");
        this.menuForm = res.list;
        this.menuForm.id = id;
      });
    },
    add() {
      //validate	对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise
      this.$refs.menuRef.validate((val) => {
        // console.log(val);
        if (val) {
          if (this.isAdd) {
            // 调用添加接口
            // console.log(this.menuForm, "表单对象");
            // 调用添加接口
            menuAdd(this.menuForm).then((res) => {
              if (res.code == 200) {
                // 关闭弹窗
                this.cancel();
              } else {
                this.$message.error(res.msg);
              } // 重新调用列表=>触发行动
              this.$store.dispatch("menu/getMenuListActions");
              this.$message.success(res.msg);
              console.log(res, "添加");
            });
          } else {
            // 调用的是编辑接口
            menuEdit(this.menuForm).then((res) => {
              if (res.code == 200) {
                // 关闭弹框
                this.cancel();
                // 重新调用列表 触发行动
                this.$store.dispatch("menu/getMenuListActions");
                this.$message.success(res.msg);
              } else {
                this.$message.error(res.msg);
              }
            });
          }
        }
      });
    },
  },
  mounted() {},
  watch: {},
  computed: {},
  filters: {},
  components: {},
};
</script>
<style scoped></style>
